<template>
  <a-form :disabled="!suitStore.currentSuit.tcid">
    <!-- 西医病历 -->
    <div v-if="mrmCode === 'XYBL'" class="case-table my-2">
      <div v-for="item in WMItems" :key="item.value" class="case-item">
        <template v-if="item.label === '处置'">
          <div class="label">处置</div>
          <div class="content">
            <a-textarea v-model:value="formState[item.value]" placeholder="请输入" :rows="4" />
          </div>
        </template>
        <template v-else>
          <div class="label" :class="{ required: item.label === '初步诊断' }">{{ item.label }}</div>
          <div class="content h-10">
            <SelectTable
              v-if="item.label === '初步诊断'"
              v-model:value="formState[item.value]"
              type="诊断"
              :disabled="!suitStore.currentSuit.tcid"
              @select="onSelect(item.value, item.code, $event)"
            />
            <SelectTable
              v-if="item.label === '其他诊断'"
              v-model:value="formState[item.value]"
              multiple
              type="诊断"
              :auto-mark="false"
              :disabled="!suitStore.currentSuit.tcid"
              @select="onSelect(item.value, item.code, $event, true)"
            />
            <SelectTags v-else v-model:value="formState[item.value]" show-setting show-new multiple type="医嘱字典" :search-params="{ blcybh: item.label }" />
          </div>
        </template>
      </div>
    </div>
    <!-- 中医 -->
    <div v-else-if="mrmCode === 'ZYBL'" class="case-table my-2">
      <div v-for="item in TCMItems" :key="item.value" class="case-item">
        <div class="label" :class="{ required: item.label === '临床诊断' }">{{ item.label }}</div>
        <div class="content h-10">
          <SelectTable
            v-if="item.label === '临床诊断'"
            v-model:value="formState[item.value]"
            type="诊断"
            :disabled="!suitStore.currentSuit.tcid"
            @select="onSelect(item.value, item.code, $event)"
          />
          <SelectTable
            v-if="item.label === '中医诊断'"
            v-model:value="formState[item.value]"
            type="中医诊断"
            :disabled="!suitStore.currentSuit.tcid"
            @select="onSelect(item.value, item.code, $event)"
          />
          <SelectTable
            v-if="item.label === '中医证名'"
            v-model:value="formState[item.value]"
            type="中医证名"
            :disabled="!suitStore.currentSuit.tcid"
            @select="onSelect(item.value, item.code, $event)"
          />
          <SelectTags v-else v-model:value="formState[item.value]" show-setting show-new multiple type="医嘱字典" :search-params="{ blcybh: item.label }" />
        </div>
      </div>
    </div>
    <!-- 眼科病历一 -->
    <div v-else class="case-table my-2">
      <div v-for="item in EYEItems" :key="item.value" class="case-item">
        <div class="label" :class="{ required: item.label === '初步诊断' }">{{ item.label }}</div>
        <div class="content h-10">
          <div v-if="item.label === '初步诊断'" class="flex h-full">
            <SelectTable
              v-model:value="formState[item.value]"
              type="诊断"
              :disabled="!suitStore.currentSuit.tcid"
              @select="onSelect(item.value, item.code, $event)"
            />
            <a-radio-group v-model:value="formState.bcYblb" class="flex items-center" name="radioGroup">
              <a-radio value="OU">OU</a-radio>
              <a-radio value="OD">OD</a-radio>
              <a-radio value="OS">OS</a-radio>
            </a-radio-group>
          </div>
          <SelectTable
            v-if="item.label === '其他诊断'"
            v-model:value="formState[item.value]"
            multiple
            type="诊断"
            :auto-mark="false"
            :disabled="!suitStore.currentSuit.tcid"
            @select="onSelect(item.value, item.code, $event, true)"
          />
          <SelectTags
            v-else
            v-model:value="formState[item.value]"
            show-setting
            show-new
            multiple
            type="医嘱字典"
            :input-or-textarea="false"
            :search-params="{ blcybh: item.label }"
          />
        </div>
      </div>
    </div>
    <div class="flex justify-end mt-4">
      <a-button class="mr-4" @click="formState = {}">重置</a-button>
      <a-button type="primary" :disabled="!formState.bcLczdZdmc" @click="onSubmit">保存</a-button>
    </div>
  </a-form>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import SelectTags from '@/components/SelectTags'
import SelectTable from '@/components/SelectTable'
import useSuitStore from '../../workstation/store'

const props = defineProps({
  mrmCode: {
    description: '病历类型',
    type: String,
    default: ''
  }
})
const suitStore = useSuitStore()

const emit = defineEmits(['success'])
const formState = ref({ bcYblb: 'OU' })
const WMItems = ref([
  { label: '主诉', value: 'bcZs' },
  { label: '病史', value: 'bcXbs' },
  { label: '既往史', value: 'bcJws' },
  { label: '家族史', value: 'bcJzs' },
  { label: '月经史', value: 'bcYjsjsys' },
  { label: '体格检查', value: 'bcTgjc' },
  { label: '辅助检查', value: 'bcFzjc' },
  { label: '初步诊断', value: 'bcLczdZdmc', code: 'bcLczdZddm' },
  { label: '其他诊断', value: 'bcQtzdZdmc', code: 'bcQtzdZddm' },
  { label: '注意事项', value: 'bcZysx' }
  // { label: '处置', value: 'bcCz' }
])
const TCMItems = ref([
  { label: '主诉', value: 'bcZs' },
  { label: '病史', value: 'bcXbs' },
  { label: '既往史', value: 'bcJws' },
  { label: '舌质', value: 'zybcSz' },
  { label: '舌苔', value: 'zybcSt' },
  { label: '脉象', value: 'zybcMx' },
  { label: '阳性体征', value: 'zybcYxtz' },
  { label: '辅助检查', value: 'bcFzjc' },
  { label: '辩证施治', value: 'zybcBzsz' },
  { label: '临床诊断', value: 'bcLczdZdmc', code: 'bcLczdZddm' },
  { label: '中医诊断', value: 'zybcZyzdZdmc', code: 'zybcZyzdZddm' },
  { label: '中医证名', value: 'zybcZyzxMc', code: 'zybcZyzxDm' }
])
const EYEItems = ref([
  { label: '主诉', value: 'bcZs' },
  { label: '现病史', value: 'bcXbs' },
  { label: '既往史', value: 'bcJws' },
  { label: '个人史', value: 'bcGrs' },
  { label: '家族史', value: 'bcJzs' },
  { label: '过敏史', value: 'bcGms' },
  { label: '眼部检查', value: 'bcYbjc' },
  { label: '辅助检查', value: 'bcFzjc' },
  { label: '初步诊断', value: 'bcLczdZdmc', code: 'bcLczdZddm' },
  { label: '其他诊断', value: 'bcQtzdZdmc', code: 'bcQtzdZddm' },
  { label: '处理意见', value: 'bcCl' }
  // { label: '交待', value: 'bcJd' }
])

// //获取病历信息
const getData = async () => {
  const res = await post('/outp/template/getOutpEMPTemplate', {
    tcid: suitStore.currentSuit.tcid
  })
  if (res.code !== 0) return message.error(res.msg || '获取病历信息失败')
  formState.value = res.data || {}
}

//保存病历信息
const onSubmit = async () => {
  const res = await post('/outp/template/doAddOutpEMRTemplate', {
    ...formState.value,
    tcid: suitStore.currentSuit.tcid,
    mrmCode: props.mrmCode,
    qtzdxx: ''
  })
  if (res.code !== 0) return message.error(res.msg || '保存失败')
  message.success('保存成功')
  emit('success')
}
const onSelect = (value, code, select, multiple = false) => {
  if (multiple) {
    //多选拼接
    // formState.value[value] = formState.value[value] ? formState.value[value] + ',' + select.mc : select.zdmc
    // formState.value[code] = formState.value[code] ? formState.value[code] + ',' + select.dm : select.zddm

    formState.value[value] = formState.value[value] ? formState.value[value] + ',' + select.zdmc || select.mc : select.zdmc || select.mc
    formState.value[code] = formState.value[code] ? formState.value[code] + ',' + select.zddm || select.dm : select.zddm || select.dm
  } else {
    formState.value[value] = select.zdmc || select.mc
    formState.value[code] = select.zddm || select.dm
  }
}
watch(
  () => suitStore.currentSuit.tcid,
  (val) => {
    val ? getData() : (formState.value = {})
  }
)
</script>
<style lang="less" scoped>
.case-table {
  --border-color: rgba(125, 125, 125, 0.16);
  border: 1px solid var(--border-color);
  .case-item {
    display: flex;
    .required {
      position: relative;
      &::before {
        position: absolute;
        top: 8px;
        left: 8px;
        color: red;
        content: '*';
      }
    }
    .label {
      display: flex;
      align-items: center;
      width: 120px;
      height: 54px;
      padding: 8px 16px;
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .content {
      flex: 1;
      height: 54px;
      overflow: hidden;
      border-bottom: 1px solid var(--border-color);
      :deep(.ant-input) {
        height: 100%;
        border: none;
        border: 1px solid transparent;
        border-radius: 0;
        &:focus {
          background: var(--edit-cell-color);
          border: 1px solid var(--primary-color);
          box-shadow: none;
        }
        &:hover {
          background: var(--bg-color);
          border: 1px solid var(--primary-color);
        }
      }
      :deep(.ant-input-affix-wrapper) {
        height: 100%;
        background: var(--bg-color);
        border: 1px solid transparent;
        border-radius: 0;
        &-focused {
          border: 1px solid var(--primary-color);
          box-shadow: none;
        }
        &:hover {
          background: var(--bg-color);
          border: 1px solid var(--primary-color);
        }
        .ant-input {
          border: none;
        }
      }
    }
    &:last-child {
      .content,
      .label {
        align-items: flex-start;
        border-bottom: none;
      }
    }
  }
}
</style>
